<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>考试</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/exam.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header">
	<a class="left_icon back_btn"></a>
	<h4 class="title">考试</h4>
</header>

<div class="swiper-container bg-w Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="examMod">
				
				<!--头图-->
				<div class="examCover">
					<img :src="exam.cover" />
				</div>
				<!--头图 end-->
				
				<!--试卷信息-->
				<div class="examBaseInfo">
					<h1 class="title">{{exam.name}}</h1>
					<h5 class="class">{{exam.class}}</h5>
					<h5 class="intro bottom-line">{{exam.intro}}</h5>
					<h5 class="time"><span class="bt">考试时间：</span>{{exam.start}}</h5>
					<h5 class="addr"><span class="bt">考试地点：</span>{{exam.addr}}</h5>
					<h5 class="aduration"><span class="bt">考试时长：</span>{{exam.duration}}分钟</h5>
				</div>
				<!--试卷信息 end-->
				
				<a class="examStartBtn tc" @click="skip">{{countDown == null ? '开始考试' : countDown}}</a>
				
				<h6 class="prompt tc">本次考试包含{{exam.totalNum}}个题目,总计{{exam.score}}分。</h6>
				
				<h5 class="import tl">要求：本次考试将淘汰10%末位人数。完成要求即可通过考试</h5>
				
			</div>
			
		</div>
	</div>
</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#Main",
	data:{
		exam:{
			cover:'image/exam/exam_cover.jpg',
			name:'项目管理考试',
			class:'项目管理',
			intro:'项目管理考试将针对项目管理内容，对各个部门实施检测，以提高各个部门领导项目管理能力。',
			start:'2018-11-30 14:00',
			addr:'志邦总部研发楼202',
			duration:'100',
			totalNum:100,
			score:100
		},
		countDown:null,//倒计时,如果距离考试时间在2小时以内才会触发倒计时效果
	},
	methods:{
		//获取距离考试时间
		getCountDown:function(){
			var that = this;
			
			//获取开始考试时间
			var start = Date.parse(new Date(that.exam.start+':00')).toString();
			//获取当前时间
			var current = Date.parse(new Date()).toString();
			
			//删除后三个毫秒数
			start = start.substr(0,start.length-3);
			current = current.substr(0,current.length-3);
			
			//距离开始考试时间差值
			var distant = start - current;
			
			if(distant > 0){
				//未到指定考试时间，出现倒计时效果
				
				//转换成时分秒
				var hour = Math.floor(distant/3600);
				var minute = Math.floor((distant-hour*3600)/60);
				var second = distant - hour*3600 - minute*60;
				
				//定义时分秒的格式
				var date = {
					hour:hour,
					minute:minute < 10 ? '0' + minute : minute ,
					second:second < 10 ? '0' + second : second
				};
				
				that.countDown = date.hour+' : '+date.minute+' : '+date.second;
				
				//1s后再次执行
				setTimeout(function(){
					that.getCountDown();
				},1000);
				
			}else{
				//到达指定考试时间，出现开始考试按钮
				that.countDown = null;
			};
		},
		//跳转去考试
		skip:function(){
			if(this.countDown == null){
				location.href = 'examTest.html'
			};
		}
	},
	mounted:function(){
		this.getCountDown();
		pullSwiper('#Main');
	},
});

</script>

</body>
</html>
